<template>
  <div class="app-container">
    <!-- 资源配置页面 -->
    <el-drawer
      :visible.sync="visible"
      direction="rtl"
      size="40%"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :show-close="false"
    >
      <template v-slot:title>
        <div class="drawer-header">
          <span>资源配置</span>
          <div>
            <el-button icon="el-icon-close" @click="visible = false">
              取消
            </el-button>
            <el-button type="primary" :loading="submitting" icon="el-icon-check" @click="handleSubmitFormData">
              <span v-if="!submitting">确认</span>
              <span v-else>提 交 中...</span>
            </el-button>
          </div>
        </div>
      </template>
      <el-form label-position="right" label-width="100px">
        <el-input v-model="roleId" type="hidden" />
        <el-row>
          <el-col :span="24">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleSelected">全选/全不选</el-checkbox>
            <el-checkbox v-model="expandAll" @change="handleExpand">展开/折叠</el-checkbox>
            <el-checkbox v-model="checkStrictly" @change="handleCheckedStrictly($event)">父子节点联动</el-checkbox>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <div style="border: 1px solid #8bcbe3;height: 86vh;overflow-y: auto;">
              <el-tree
                ref="resTree"
                :data="resTreeData"
                :props="defaultProps"
                :check-strictly="!checkStrictly"
                empty-text="加载中，请稍候"
                show-checkbox
                node-key="id"
                default-expand-all
                @check="handleNodeCheckChange"
              />
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { getRoleResList, saveRoleResInfo } from '@/views/sys/role/api'
import { getAllResList } from '@/views/sys/res/api'
import waves from '@/directive/waves' // waves directive
// import { parseTime } from '@/utils'

export default {
  name: 'RoleRes',
  components: {},
  directives: { waves },
  filters: {},
  // props属性
  props: {
    roleResParams: {
      type: Object,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 是否显示弹出层
      visible: false,
      // 表单遮罩
      submitting: false,
      roleId: undefined,
      resTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultExpandedKeys: [],
      checkedKeys: [],
      isIndeterminate: true,
      checkStrictly: undefined,
      checkAll: true,
      expandAll: true
    }
  },
  computed: {},
  watch: {},
  created() {
    // 列表table数据在页面渲染完成后加载
    // this.getList()
  },
  mounted() {},
  methods: {
    init() {
      this.visible = this.roleResParams.visible
      this.roleId = this.roleResParams.roleId

      this.defaultExpandedKeys = []
      this.isIndeterminate = true
      this.checkAll = true
      this.expandAll = true
      // 初始值为父子不联动
      this.checkStrictly = false
      this.checkedKeys = []
      getAllResList({ type: undefined }).then(res => {
        this.resTreeData = res.data
        getRoleResList({ roleId: this.roleId }).then(r => {
          if (r.data && r.data.length > 1) {
            r.data.forEach(it => {
              this.checkedKeys.push(it.resId)
            })
          }
          this.$refs.resTree.setCheckedKeys(this.checkedKeys)
        })
      })
    },
    // 节点选中状态改变
    handleNodeCheckChange() {
      // (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
      const nodes = this.$refs.resTree.getCheckedNodes(false, true)
      this.checkedKeys = []
      if (nodes && nodes.length > 0) {
        nodes.forEach(it => {
          this.checkedKeys.push(it.id)
        })
      }
    },
    // 设置全选/全不选
    handleSelected() {
      this.isIndeterminate = false
      if (this.checkAll) {
        this.$refs.resTree.setCheckedNodes(this.resTreeData)
      } else {
        this.$refs.resTree.setCheckedKeys([])
      }
    },
    // 展开节点
    handleExpand() {
      for (let i = 0; i < this.$refs.resTree.store._getAllNodes().length; i++) {
        this.$refs.resTree.store._getAllNodes()[i].expanded = this.expandAll
      }
    },
    // 父子节点联动
    handleCheckedStrictly(value) {
      this.checkStrictly = !!value
    },
    // 提交
    handleSubmitFormData() {
      if (this.checkedKeys.length < 1) {
        this.$message({
          type: 'info',
          message: '请选择资源！'
        })
        return
      }
      const roleResArr = []
      this.checkedKeys.forEach(it => {
        roleResArr.push({ roleId: this.roleId, resId: it })
      })
      this.submitting = true
      saveRoleResInfo(roleResArr).then(res => {
        this.submitting = false
        // 这里要刷新父页面的列表
        this.$parent.handleFilterQuery()
        this.visible = false
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'success',
          duration: 4000
        })
      })
    },
    // 弹出层关闭回调
    handleClose() {
      // 这里要刷新父页面的列表，由于有个遮罩层，需要两个$parent
      this.$parent.handleFilterQuery()
      this.$refs.resTree.setCheckedKeys([])
      this.visible = false
    }
  }
}
</script>
